import { _decorator, Button, Label, Node, RichText, tween, Tween, UITransform } from 'cc';
import { BasePopUp } from '../../../frame/component/ui.pop-up';
import type { ServiceAPIURI, ServiceResult } from '../../api/api.config.service';
import Config from '../../manager/config.manager';
import GameDC from '../../manager/data.game.center';
import GameAssets from '../../manager/game.assets';
import GameManager from '../../manager/game.manager';
import type { Popup } from '../page/popup';
const { ccclass, property } = _decorator;

type CACHE = ServiceResult<ServiceAPIURI.UserInfo>['freePool'][number];

@ccclass('FreeCache')
export class FreeCache extends BasePopUp<typeof Popup, null> {
	protected default_return: null;
	private free_cache: Promise<CACHE>;
	private ui_container: UITransform;
	private lbl_head: Label;
	private lbl_symbol: Label;
	private lbl_help: Label;
	private richtext_hint: RichText;
	private ui_hint: UITransform;
	private timeout: number;
	private nd_light: Node;

	protected initAfterOnLoad(): void {
		this.timeout = 7 * mtec.time.ONE_DAY;
		this.ui_container = this.node.getChildByName('container').getComponent(UITransform);
		this.lbl_head = this.ui_container.node.getChildByName('lbl-head').getComponent(Label);
		this.lbl_symbol = this.ui_container.node.getChildByName('lbl-symbol').getComponent(Label);
		this.lbl_help = this.ui_container.node.getChildByName('lbl-help').getComponent(Label);
		this.ui_hint = this.node.getChildByName('hint').getComponent(UITransform);
		this.richtext_hint = this.node.getChildByName('richtext-hint').getComponent(RichText);
		this.nd_light = this.ui_container.node.getChildByName('light');

		this.renderLocalUI();
	}

	public onShow(cache: mtec.OmitO<CACHE, 'freeID'>){

		this.lbl_head.string = GameAssets.getLangText(19, cache.round);
		this.lbl_symbol.string = Config.symbolString(cache.symbol);
		this.lbl_help.string = GameAssets.getLangText(21, ' 2%');

		this.refreshFreeHint(GameDC.User.last_free_timestamp);

		BasePopUp.jelly_enter(this.ui_container.node);

		this.free_cache = GameManager.addFreePool(cache.round);

		Tween.stopAllByTarget(this.nd_light);

		tween(this.nd_light)
		.set({angle: 0}) .to(5, {angle: -360}) .union()
		.repeatForever() .start();
	}

	protected _click_event_: { [name: string]: (this: FreeCache, button: Button) => void; } = {
		async close(btn){
			btn.interactable = false;
			await this.exit();
			btn.interactable = true;
			GameDC.Trigger.FreeCacheGuide = true;
		},
		async free(btn){
			btn.interactable = false;

			let [cache, info] = await Promise.all([this.free_cache, this.pop.FreeInfo()]);

			if(!this.is_close){
				await this.exit();
			}
			btn.interactable = true;

			if(info && cache){
				await GameManager.sendFree(cache, info);
				await this.pop.FreeSuccess(cache.symbol);
				GameDC.Trigger.FreeCacheGuide = false;
			}else{
				GameDC.Trigger.FreeCacheGuide = true;
			}
		}
	}

	protected listening(){
		let list = [
			this.follow(GameDC.User, 'last_free_timestamp', (_, v)=>this.refreshFreeHint(v)),
		];

		return list;
	}

	private async exit(){
		await BasePopUp.jelly_leave(this.ui_container.node);
		this.close(null);
		Tween.stopAllByTarget(this.nd_light);
		this.nd_light.angle = 0;
	}

	private renderLocalUI(){
		(<const>[
			['free', 6],
			['desc', 20],
			['desc2', 22],
		]).forEach(([name, idx])=>{
			this.ui_container.node.getChildByName('lbl-'+name).getComponent(Label).string = GameAssets.getLangText(idx);
		});

		mtec.cc.skinPeeler(this.ui_container.node.getChildByName('icon-symbol'), GameAssets.getCounTexture(5), {height: true});

		let rich_str = '<outline color=#1B1724 width=5>string</outline>'
		rich_str = rich_str.replace('string', GameAssets.getLangText(83, '<color=#FF4145>', '</color>', '<color=#FF4145>', '</color>', '<color=#FF4145>', '</color>'));
		this.richtext_hint.string = rich_str;
	}

	private refreshFreeHint(time_stamp?: number){
		let wait = false;
		if(time_stamp){
			wait = (Date.now() - time_stamp) < this.timeout;
		}
		[this.richtext_hint.node, this.ui_hint.node].forEach(nd=>nd.active = wait);
	}
}
